<script setup>
  import { computed } from 'vue'
  const props = defineProps({
    modelValue: {
      type: [String, Number, Boolean],
      default: true
    },
    trueValue: {
      type: [String, Number, Boolean],
      default: 1
    },
    falseValue: {
      type: [String, Number, Boolean],
      default: 0
    },
    color: {
      type: String,
      default: '#20c6b2'
    },
    customStyle: {
      type: String
    }
  })
  const emit = defineEmits(['update:modelValue'])
  const isChecked = computed(() => {
    return props.modelValue === props.trueValue
  })
  const onChange = (e) => {
    emit(
      'update:modelValue',
      e.detail.value ? props.trueValue : props.falseValue
    )
  }
</script>
<template>
  <view class="my-switch">
    <switch
      :checked="isChecked"
      @change="onChange"
      :color="props.color"
      :style="customStyle"
    />
  </view>
</template>

<style>
  .my-switch {
    display: flex;
    align-items: center;
    height: 100%;
  }
</style>
